<script >

import axios from "axios";
import {attachImg} from "@/api";

export default {
  name: 'DepartmentPage',

  data() {
    return {
      departmentList: [],
      formInfo: {},
      options: [],
      options1: [],
      value: '1',
      value2: '1',
      issingle: true,
      drawer: false
    }
  },

  mounted() {
    this.getAllSymptomatic();
    this.onSubmit()
  },
  methods: {
    attachImg,
    goBack() {
      // 使用 Vue Router 的 back 方法返回上一页
      this.$router.back();
    },
    getAllSymptomatic() {
      axios.get("http://localhost:9099/api/hospital-departments")
          .then(res => {
            this.options = res.data.data; // 直接赋值 res.data 到 this.options
          })
          .catch(error => {
            console.error('请求失败', error);
          });
    },
    updateSubcategoryOptions() {
      if (this.value) {
        this.getAllSymptom(this.value);
      } else {
        this.options1 = [];
      }
      this.departmentList = '';
      this.value2 = '';
    },
    getAllSymptom(symptomaticid) {
      axios.get(`http://localhost:9099/hospital-type?id=${symptomaticid}`)
          .then(res => {
            this.options1 = res.data.data;
            console.log(res.data.data);
          })
          .catch(error => {
            // 错误处理
            if (error.response) {
              console.error('后端返回错误:', error.response.data);
              console.error('状态码:', error.response.status);
            } else if (error.request) {
              console.error('请求已发出，但没有收到响应');
            } else {
              console.error('请求错误:', error.message);
            }
            console.error('请求配置:', error.config);
          });
    },
    onSubmit() {
      axios.get(`http://localhost:9099/hospital-doctor?id=${this.value2}`)
          .then(res => {
            this.departmentList = res.data.data; // 直接赋值 res.data 到 this.departmentList
          })
          .catch(error => {
            console.error('请求失败:', error);
          });
    },
    onSubmit1() {
      this.value = '';
      this.value2 = '';
    },
    handleClick(){
        this.$router.push('/HomePage/AiServe');
    }
  }
}
</script>

<template>

  <el-page-header @back="goBack">
    <template #content>
      <span class="text-large font-600 mr-3">科室查询</span>
    </template>
  </el-page-header>

  <el-row class="el-row">
    <el-col :span="6">
      <el-form-item label="主科室:">
        <el-select v-model="value" placeholder="Select" style="width: 240px" @change="updateSubcategoryOptions">
          <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.department"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-col>

    <el-col :span="6" class="col">
      <el-form-item label="子科室:">
        <el-select v-model="value2" placeholder="Select" style="width: 240px" @change="onSubmit">
          <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.type"
              :value="item.departmentid"
          />
        </el-select>
      </el-form-item>
    </el-col>


  </el-row>

  <el-table :data="departmentList" style="width: 100%">
    <el-table-column prop="doctor" label="医生姓名" width="150"/>
    <el-table-column prop="doctorhead" label="医生图片" width="120">
      <template #default="scope">
        <el-image :src="attachImg(scope.row.doctorhead)" width="150px"/>
      </template>
    </el-table-column>
    <el-table-column prop="address" label="所属医院" width="120"/>
    <el-table-column prop="post" label="医生职位" width="120"/>
    <el-table-column prop="department" label="科室" width="120"/>
    <el-table-column prop="specialty" label="擅长领域" width="120"/>
    <el-table-column prop="price" label="咨询价格" width="120"/>

    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          问医生
        </el-button>
      </template>
    </el-table-column>
  </el-table>


</template>

<style>
.el-row {
  margin-top: 20px;
}

.col {
  margin-left: 10px;
}

</style>